<template>
  <div>
    <el-form :model="ruleForm" ref="ruleForm">
      <KWNineTable :headerData="headerData" :tableData="tableData">
        <template v-slot:date="{ row }">
          <div>
            <el-form-item :prop="
                'tableData['+row.$index+'].date'
                
            "
            :rules="date"
            >
                <el-input v-model="row.date"></el-input>
            </el-form-item>
          </div>
        </template>
        <template v-slot:name="{ row }">
          <div>
              <el-form-item :prop="
                'tableData['+row.$index+'].name'
                "
                :rules="name"
            >
                <el-input v-model="row.name"></el-input>
            </el-form-item>
          </div>
        </template>
        <template v-slot:age="{ row }">
          <div>
            <el-form-item :prop="
                'tableData['+row.$index+'].age'
            "
            :rules="age"
            >
                <el-input v-model="row.age"></el-input>
            </el-form-item>
          </div>
        </template>
        <template v-slot:sex="{ row }">
          <div>
           <el-form-item :prop="
                'tableData['+row.$index+'].sex'"
                :rules="sex"
                >
                <el-input v-model="row.sex"></el-input>
            </el-form-item>
          </div>
        </template>
      </KWNineTable>
      <el-button type="primary"
      @click="tijiao()">提交</el-button>
    </el-form>
  </div>
</template>
<script>
import KWNineTable from "@/components/kwNineSuperTable";
export default {
  data() {
    return {
        date:[
            {
                validator:(rule,value,calllback) =>{
                    console.log(rule);
                    console.log(value);
                    if(value == ""){
                        calllback(new Error("请输入时间"))
                    }else{
                        calllback()
                    }
                }
            }
        ],
        name:[
        {
                validator:(rule,value,calllback) =>{
                    console.log(rule);
                    console.log(value);
                    if(value == ""){
                        calllback(new Error("请输入姓名"))
                    }else{
                        calllback()
                    }
                }
            }
        ],
        age:[
        {
                validator:(rule,value,calllback) =>{
                    console.log(rule);
                    console.log(value);
                    if(value == ""){
                        calllback(new Error("请输入年龄"))
                    }else{
                        calllback()
                    }
                }
            }
        ],
        sex:[
        {
                validator:(rule,value,calllback) =>{
                    console.log(rule);
                    console.log(value);
                    if(value == ""){
                        calllback(new Error("请输入性别"))
                    }else{
                        calllback()
                    }
                }
            }
        ],
        ruleForm:{
            tableData:[]
        },
      headerData: [
        {
          prop: "date",
          label: "时间",
          width: "220",
          must: true,
          slot: true,
        },
        {
          prop: "name",
          label: "名字",
          width: "220",
          must: true,
          slot: true,
        },
        {
          prop: "age",
          label: "年龄",
          width: "220",
          must: true,
          slot: true,
        },
        {
          prop: "sex",
          label: "性别",
          must: true,
          slot: true,
        },
      ],
      tableData: [
        {
          date: "",
          name: "",
          age: "",
          sex: "",
        },
        {
          date: "",
          name: "",
          age: "",
          sex: "",
        },
        {
          date: "",
          name: "",
          age: "",
          sex: "",
        },
        {
          date: "",
          name: "",
          age: "",
          sex: "",
        },
        {
          date: "",
          name: "",
          age: "",
          sex: "",
        },
      ],
    };
  },
  methods: {
      tijiao(){
          this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
  },
  components: {
    KWNineTable,
  },
  mounted() {
    //   请求接口拿到数据 
    let _self = this;
    // _self.ruleForm.tableData = _self.tableData;//如果我们把 _self.tableData 里面的数据当做是后端返回的_self.ruleForm.tableData=后端返回的数据
     _self.$set(_self.ruleForm,"tableData", _self.tableData)
  },
};
</script>